<template>
  <div>
    <Row>
      <Card style="width:100%" dis-hover="true">
        <span style="margin-left: 50px;">
          <b>操作时间</b> &nbsp;
        </span>
        <DatePicker v-model="params.time" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
        <Button
          type="primary"
          size="default"
          shape="circle"
          icon="ios-search"
          style="margin-left: 130px;"
          @click="search"
        >搜索</Button>
      </Card>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <Table border ref="selection" :columns="columns" :data="logList"></Table>
        <br />
        <Row>
          <b>共{{total}}条记录</b>&nbsp;&nbsp;
          <Button type="error" @click="removeAll">删除选中</Button>
          <Button type="primary" @click="exportExcel" style="margin-left: 50px">导出日志</Button>
          <Page :total="total" style="float: right" @on-change="changePage" />
        </Row>
      </Card>
    </Row>
  </div>
</template>
<script>
import { getUser } from '@/libs/util.js'
import * as logApi from '@/api/log.js'
import excel from '@/libs/excel'
export default {
  data () {
    return {
      logList: [],
      params: {
        id: 0,
        time: null,
        size: 10,
        page: 1
      },
      total: 0,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',

          key: 'username'
        },
        {
          title: '角色',

          key: 'role'
        },
        {
          title: 'URL',
          key: 'url',
          width: '250'
        },
        {
          title: '方法',

          key: 'action'
        },
        {
          title: 'IP',

          key: 'ip'
        },
        {
          title: '结果',

          key: 'result'
        },
        {
          title: '操作时间',
          key: 'creatTime',
          width: '150'
        },
        {
          title: '操作',
          key: 'action',

          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },
  methods: {
    initList: function () {
      logApi.getShopLogList(this.params).then(res => {
        if (res.data.code == 200) {
          this.logList = res.data.data.list
          this.total = res.data.data.total
        }
      })
    },
    changePage: function (page) {
      this.params.page = page
      this.initList()
    },
    search: function () {
      this.params.page = 1
      this.initList()
    },
    remove: function (id) {
      logApi.remove(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.success('删除成功')
          this.initList()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    removeAll: function () {
      this.$Modal.confirm({
        title: '警告',
        content: '<p>您确定要删除所选记录吗?</p>',
        onOk: () => {
          const logList = this.$refs.selection.getSelection()
          logApi.removeAll(logList).then(res => {
            if (res.data.code == 200) {
              this.$Message.success('删除成功')
              this.initList()
            } else {
              this.$Message.error(res.data.message)
            }
          })
        },
        onCancel: () => {}
      })
    },
    exportExcel () {
      if (this.logList.length) {
        this.exportLoading = true
        logApi.findShopLogAll(this.params.id).then(res => {
          if (res.data.code == 200) {
            const params = {
              title: [
                '用户名',
                'URL',
                '方法',
                'IP',
                '结果',
                '操作时间'
              ],
              key: [
                'username',
                'url',
                'action',
                'ip',
                'result',
                'creatTime'
              ],
              data: res.data.data,
              autoWidth: true,
              filename: '日志列表'
            }
            excel.export_array_to_excel(params)
            this.exportLoading = false
          } else {
            this.$Message.error('服务器未知错误')
          }
        })
      } else {
        this.$Message.info('表格数据不能为空！')
      }
    }
  },
  mounted () {
    var s = getUser()
    this.params.id = s.slice(4)
    this.initList()
  }
}
</script>
<style>
.hr {
  margin-top: 7px;
  *margin: 0;
  border: 0;
  color: grey;
  background-color: black;
  height: 1px;
}
</style>
